<template>
  <section class="cms-body" v-loading="loading">
    <!-- 返回组件 -->
    <cms-back></cms-back>
    <el-form ref="form" :model="dataInfo" :rules="rules" class="cms-form" label-width="162px">

      <!-- 名称 -->
      <el-form-item label="协议名称" class="flex-50 " prop="htmlTitle">
        <el-input class="cms-width" v-model="dataInfo.htmlTitle"></el-input>
      </el-form-item>

      <!-- 名称 -->
      <el-form-item label="协议编码" class="flex-50 " prop="htmlCode">
        <el-input class="cms-width" v-model="dataInfo.htmlCode" :disabled="isType('update')"></el-input>
      </el-form-item>


      <el-form-item label="协议内容" class="flex-100 " prop="content">
        <cms-editor :defaultMsg="dataInfo.htmlContent" @ready="getUeditor"></cms-editor>
      </el-form-item>

      <!-- 按钮组 -->
      <div class="form-footer">
        <el-button type="warning" v-if="isType('save')" @click="add(true)" v-perms="'/html/save'">提交并继续添加</el-button>
        <el-button type="primary" v-if="isType('save')" @click="add(false)" v-perms="'/html/save'">提交</el-button>
        <el-button type="primary" v-if="isType('update')" @click="update()" v-perms="'/html/update'">修改</el-button>
        <el-button type="info" @click="$reset">重置</el-button>
        <span class="gray" v-if="isType('save')">选择“提交并继续添加”按钮会停留在添加页面；选择“提交”按钮后将跳转到对应的列表页</span>
      </div>

    </el-form>

  </section>
</template>
<script>
  import axios from "axios/index";
  import va from "@/rules";
  import formMixns from "@/mixins/form";

  export default {
    mixins: [formMixns], //普通表单变量
    data() {
      let required = va.required('此项必填');
      let number = va.number('必须为数字');
      return {
        rules: {//校验规则

        },
        ue: [],
        dataInfo: {
          htmlId: '',
          htmlTitle: '',
          parentId: '',
          htmlCode: '',
          htmlImage: '',
          htmlType: '',
          htmlContent: '',
          moduleName: '',
          isParent: '',
          sortOrder: '',
          htmlStatus: ''
        },
      };
    },
    methods: {
      getUeditor(ue, index) {
        this.ue[index] = ue; //获取ue实例
      },
      getDataInfo(id, type) {
        if (type == 'update') {
          axios.post(this.$api.htmlGet, {htmlId: id}).then(res => {
            console.log(res)
            this.dataInfo = res.body;
          }).catch(err => {
            console.log(err);
          });
        }
        this.loading = false;
      },
      update() {
        this.dataInfo.htmlContent = this.ue[0].getContent();
        this.updateDataInfo(this.$api.htmlUpdate, this.dataInfo, "pageList");
      },
      add(state) {
        this.dataInfo.htmlContent = this.ue[0].getContent();
        this.saveDataInfo(state, this.$api.htmlSave, this.dataInfo, "pageList");
      },
    },
    created() {
      this.getDataInfo(this.id, this.type);
    }
  };
</script>
<style>
  .cms-col2 {
    width: 20%;
  }

  .flex-50 {
    height: 63px;
  }

  .upload {
    height: 161px;
  }
</style>
